/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions, TextInput } from 'react-native';
import { Icon, Button, Toast } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Between, ItemX, ItemY, Text, TouchOpacity
} from '../../../../library'


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class UserProtocol extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */


        this.state = {
            carcode:"",
        };
    }


    submitInfo(){

        if(this.state.carcode == ""){
            Toast.info("请填写车牌号", 2);
            return;
        }

        HttpTemp.post({

            url:"/page/mycar/logic/add.php",
            data:{
                set_number:this.state.carcode
            },
            success:(res) => {
                Toast.info("已成功添加", 2);
            },
            error: {
                code: (res)=> {
                    Toast.info(res.msg,2);
                }
            }

        })
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        var windowWidth = Dimensions.get('window').width;
        return(
            <Page>

                <Content bg='rgba(248, 248, 248, 1)' mt='48'>

                    <View>

                        {/* 车辆信息标题 */}
                        <ItemX w={windowWidth/24*22} ml={windowWidth/24*1}  h="40" y="center"> 
                            <Text color="#AEAEAE">车辆信息</Text>
                        </ItemX>
                        
                        <ItemY  w={windowWidth} bg="white">

                            {/* 车牌号码信息 */}
                            <ItemX w={windowWidth/24*22} ml={windowWidth/24*1} style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}  h="50" y="center"> 
                                <Between>
                                    <Text color="#434343">车牌号码</Text>
                                    <TextInput
                                        onChangeText={(val)=>{
                                            this.setState({
                                                carcode:val,
                                            })
                                        }}

                                        style={{  minWidth:150, textAlign:"right" }}
                                        defaultValue={ this.state.carcode }  
                                        clearTextOnFocus={true}
                                        placeholder="请输入车牌号码"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                    />
                                </Between>
                            </ItemX>

                            {/* 车辆品牌信息 */}
                            {/* <ItemX w={windowWidth/24*22} ml={windowWidth/24*1} style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}  h="50" y="center"> 
                                <Between>
                                    <Text color="#434343">车辆品牌</Text>
                                    <TextInput
                                        style={{  minWidth:150, textAlign:"right" }}
                                        defaultValue=""  
                                        clearTextOnFocus={true}
                                        placeholder="请输入车辆品牌"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                    />
                                </Between>
                            </ItemX> */}

                            {/* 车辆型号信息 */}
                            {/* <ItemX w={windowWidth/24*22} ml={windowWidth/24*1}  h="50" y="center"> 
                                <Between>
                                    <Text color="#434343">车辆型号</Text>
                                    <TextInput
                                        style={{  minWidth:150, textAlign:"right" }}
                                        defaultValue=""  
                                        clearTextOnFocus={true}
                                        placeholder="请输入车辆型号"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                    />
                                </Between>
                            </ItemX> */}

                        </ItemY>

                        {/* 提交按钮 */}
                        <ItemY x="center" mt="20">
                            <Button onClick={()=>{
                                this.submitInfo();
                            }} 
                                style={{ width:windowWidth/24*20, height:40, backgroundColor:"rgba(2, 179, 73, 1)", borderWidth:0}}
                            >
                                <Text size="16" color="white">添加</Text>
                            </Button>
                        </ItemY>

                    </View>
                    
                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>添加车辆</Text>
                        <Text> </Text>
                    </Between>
                </Header>
                {/* 顶部 star */}


            </Page>
        )
    }
}

